<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 
         盒模型 重点
            由4部分组成
                content 内容(文字 图片)
                border 边框---会把盒子撑大
                margin 外边的间距（外间距）
               padding 里面的间距（内间距也叫泡沫）---会把盒子撑大 -内容和容器之间的间距

            margin 外边的间距（外间距）-容器（元素 标签）和容器（元素 标签）之间的间距
                      属性值为一个值表示的是四边 margin:10px;
                      属性值为两个值表示的是上下 左右 margin:10px 30px;
                      属性值为三个值表示的是 上  左右  下   margin:10px 30px 40px;
                      属性值为四个值表示的是 上 右  下 左 （顺时）  margin:10px 30px 40px 60px;

                单独的方向
                    margin-left：数值
                    margin-right:数值
                    margin-top:数值
                    margin-bottom：数值

                注意:margin不会把自身的盒子撑大，但是呢会占总盒子大小

                margin可以取负值,padding不可以取负值
                margin:0 auto;  一个有宽度的元素在父元素里水平居中(留出剩余空间，如果没有剩余空间，加了margin:0 auto;没有意义)

     -->
<style>
    *{padding:0; margin:0;}
    .box{
        width:600px; height:200px; background: red;
        padding:10px;
        margin:0 auto;
    }
    .box1{
        width:200px; height:100px;background:yellow;  
    }

</style>
</head>
<body>
    <div class="box">
        <p class="box1">这是文字</p>
        <h2>这是标签</h2>
    </div>
</body>
</html>